<template>
  <div class="article">
    <h3>最新文章</h3>
    <div class="article_list" v-for="article in articleList" :key="article.id">
      <a class="thumbnail">
        <img :src="article.list_img_src" alt />
      </a>
      <div class="list_content">
        <h2 class="title">
          <span class="classify">{{article.catalog}}</span>
          <router-link :to="{name:'details',params:{id:article.id}}" v-text="article.title"></router-link>
        </h2>
        <p class="summary">{{article.content}}</p>
        <div class="operation">
          <div class="information">
            <span>
              <i class="el-icon-alarm-clock"></i> {{article.created_time}}
            </span>
            <span>
              <i class="el-icon-view"></i> {{article.views}}
            </span>
            <span>
              <i class="el-icon-chat-dot-round"></i> {{article.comments}}
            </span>
          </div>
          <router-link class="detail_btn" :to="{name:'details',params:{id:article.id}}">阅读详情</router-link>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleChangePage"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
        :current-page="currentPage"
        :pager-count="7"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {formatDateTime} from "@/tools/publicMethods"
import {getArticleList} from "@/api/article"
export default {
  name: "Article",
  data() {
    return {
      currentPage:1,
      pageSize:10,
      total:0,
      articleList:[]
    };
  },
  created(){
    this.getList(this.currentPage,this.pageSize);
  },
  watch:{
    "$route"(to,from){
      this.getList(this.currentPage,this.pageSize);
    }
  },
  methods: {
    async getList(currentPage,pageSize){
      await getArticleList(currentPage,pageSize).then(res=>{
        res.articleList.map(item=>{
           item.created_time = formatDateTime(item.created_time);
           return item;
        })
        
        this.articleList = res.articleList;
        this.total = res.count;
      })
    },
	handleChangePage(page){	//当前页改变时触发
		this.currentPage = page;
		this.getList(this.currentPage,this.pageSize);
	},
	handlePrevClick(page){
		this.currentPage = page;
		this.getList(this.currentPage,this.pageSize);
	},
	handleNextClick(page){
		this.currentPage = page;
		this.getList(this.currentPage,this.pageSize);
	}
  }
};
</script>  

<style lang="stylus" scoped>
.article {
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  h3 {
    color: #666;
    font-size: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9eaed;
    font-weight: normal;
  }
  .article_list {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 145px;
    padding: 20px 0;
    border-bottom: 1px solid #e9eaed;
    &::after {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 1px;
      content: '';
      // background: #404756;
	  background: #06aaff;
      transition: all .4s
    }

    &:hover {
      &::after {
        width: 100%;
      }
      .thumbnail img{
          transform: scale(1.5)
      }
    }

    .thumbnail {
      display: block;
      width: 260px;
      height: 145px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        cursor: pointer
        transition: all .6s
      }
    }

    .list_content {
      position: relative;
      flex: 1;
      margin-left: 15px;

      .title {
        font-weight: normal;
        margin-bottom: 10px;
        .classify {
          position: relative;
          margin-right: 10px;
          padding: 3px 5px;
          background: #06aaff;
          color: #fff;
          font-size: 12px;
          border-radius: 3px;
          &::after {
            content: "";
            display: block;
            position: absolute;
            top:50%;
            right: -10px;
            border: 5px solid transparent;
            border-left-color: #06aaff;
            transform: translateY(-50%);
          }
        }
        a {
          color: #333;
          text-decoration: none;
          transition: all .4s
          &:hover{
              // color: #ffd04b
			  color:#06aaff;
          }
        }
      }

      .summary {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 1.8;
        height:75px;
      }

      .operation {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 10px;

        .information {
          color: #f2be45;
          font-size: 12px;

          span {
            margin-right: 10px;
          }
        }

        a {
          padding: 2px 10px;
          text-decoration: none;
          color: #fff;
          // background: #404756;
		  background:#06aaff;
          border-radius: 3px;
        }
      }
    }
  }
  .pages{
	  margin-top:20px;
	  text-align:center;
  }
}
</style>
